// 智慧阅读管理平台登录页面样式
.login-container {
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 20px;
  position: relative;

  // 添加蒙版
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(52, 73, 94, 0.65);
    z-index: 0;
  }

  .login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    flex: 1;
    margin: 0;
    position: relative;
    z-index: 1;

    // 左侧标题和描述
    .left-section {
      flex: 1;
      max-width: 500px;

      .brand-content {
        text-align: center;
        color: #ffffff;

        .brand-title {
          font-size: 42px;
          font-weight: 700;
          margin: 0 0 12px 0;
          line-height: 1.1;
          color: #ffffff;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .brand-subtitle {
          font-size: 16px;
          font-weight: 400;
          margin: 0 0 48px 0;
          color: rgba(255, 255, 255, 0.9);
          letter-spacing: 1px;
          text-transform: uppercase;
          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        .description-text {
          max-width: 400px;
          margin: 0 auto;
          
          p {
            font-size: 16px;
            line-height: 1.8;
            margin: 0 0 12px 0;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    // 右侧登录表单卡片
    .right-section {
      flex: 0 0 auto;
      width: 420px;
      position: relative;
      z-index: 1;

      .form-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        padding: 40px;
        position: relative;

        .wechat-login-link {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #3b82f6;
          font-size: 14px;
          padding: 0;
          white-space: nowrap;
          z-index: 10;

          &:hover {
            color: #2563eb;
          }
        }

      .login-form {
        margin-bottom: 24px;

        .login-tabs {
          margin-bottom: 32px;

          :global {
            .ant-tabs-nav {
              margin-bottom: 0;

              &::before {
                border-bottom: none;
              }
            }

            .ant-tabs-tab {
              font-size: 16px;
              font-weight: 500;
              color: #6b7280;
              padding: 12px 24px;

              &:hover {
                color: #3b82f6;
              }

              &.ant-tabs-tab-active {
                .ant-tabs-tab-btn {
                  color: #1f2937;
                  font-weight: 600;
                }
              }
            }

            .ant-tabs-ink-bar {
              background: #3b82f6;
              height: 3px;
            }
          }
        }

        .form-options {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;
          margin-bottom: 24px;

          :global {
            .ant-checkbox-wrapper {
              color: #6b7280;
              font-size: 14px;

              .ant-checkbox-checked .ant-checkbox-inner {
                background-color: #3b82f6;
                border-color: #3b82f6;
              }
            }
          }

          .forgot-link {
            color: #6b7280;
            font-size: 14px;
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover {
              color: #3b82f6;
            }
          }
        }

        .code-input-group {
          display: flex;
          gap: 12px;
          align-items: center;
          margin-bottom: 20px;

          .get-code-btn {
            height: auto;
            padding: 0;
            font-size: 14px;
            color: #3b82f6;
            white-space: nowrap;
            flex-shrink: 0;

            &:hover {
              color: #2563eb;
            }
          }
        }

        // 二维码扫码界面
        .qrcode-container {
          text-align: center;
          padding: 20px 0;

          .qrcode-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            margin: 0 0 24px 0;
          }

          .qrcode-box {
            width: 200px;
            height: 200px;
            margin: 0 auto 24px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9fafb;

            .qrcode-placeholder {
              text-align: center;

              .qrcode-large-icon {
                font-size: 80px;
                color: #9ca3af;
                margin-bottom: 16px;
              }

              p {
                font-size: 14px;
                color: #6b7280;
                margin: 0;
              }
            }
          }

          .back-to-form-btn {
            color: #3b82f6;
            font-size: 14px;
            padding: 0;

            &:hover {
              color: #2563eb;
            }
          }
        }

        // 表单样式
        :global {
          .ant-form-item {
            margin-bottom: 20px;
          }

          .ant-input-affix-wrapper,
          .ant-input,
          .ant-input-password {
            height: 48px;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            background: #ffffff;
            transition: all 0.2s ease;
            font-size: 15px;
            display: flex;
            align-items: center;

            &:hover {
              border-color: #3b82f6;
            }

            &:focus,
            &.ant-input-focused,
            &.ant-input-affix-wrapper-focused {
              border-color: #3b82f6;
              box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }

            .ant-input {
              background: transparent;
              border: none;
              box-shadow: none;
              height: 48px;
              line-height: 48px;

              &:focus {
                box-shadow: none;
              }
            }
          }

          /* 进一步确保带后缀的输入框内部一致高度 */
          .ant-input-affix-wrapper > input.ant-input,
          .ant-input-password input.ant-input {
            height: 48px;
            line-height: 48px;
          }

          /* 后缀区居中对齐 */
          .ant-input-suffix {
            display: flex;
            align-items: center;
            height: 100%;
          }

          .login-button-wrapper {
            margin-top: 0;
            margin-bottom: 0;
          }

          .login-btn {
            height: 48px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            background: #3b82f6;
            border: none;
            transition: all 0.2s ease;

            &:hover {
              background: #2563eb;
              box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            }

            &:active {
              transform: scale(0.98);
            }
          }
        }
      }

      }
    }
  }

  .copyright {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;

    span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
  }

  // 响应式设计
  @media (max-width: 1024px) {
    .login-content {
      gap: 40px;

      .left-section {
        .brand-content {
          .brand-title {
            font-size: 36px;
          }

          .brand-subtitle {
            font-size: 14px;
          }

          .description-text {
            p {
              font-size: 15px;
            }
          }
        }
      }

      .right-section {
        width: 380px;

        .form-card {
          padding: 32px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 20px;

    .login-content {
      flex-direction: column;
      gap: 40px;
      margin-bottom: 20px;

      .left-section {
        max-width: 100%;

        .brand-content {
          .brand-title {
            font-size: 32px;
          }

          .brand-subtitle {
            font-size: 14px;
            margin-bottom: 32px;
          }

          .description-text {
            p {
              font-size: 15px;
            }
          }
        }
      }

      .right-section {
        width: 100%;
        max-width: 420px;

        .form-card {
          padding: 32px 24px;
        }
      }
    }
  }

  @media (max-width: 480px) {
    padding: 16px;

    .login-content {
      gap: 24px;

      .left-section {
        .brand-content {
          .brand-title {
            font-size: 26px;
          }

          .brand-subtitle {
            font-size: 13px;
            margin-bottom: 24px;
          }

          .description-text {
            p {
              font-size: 14px;
            }
          }
        }
      }

      .right-section {
        .form-card {
          padding: 24px 20px;

          .wechat-login-link {
            top: 16px;
            right: 16px;
            font-size: 13px;
          }

          .login-form {
            .login-tabs {
              :global {
                .ant-tabs-tab {
                  font-size: 14px;
                  padding: 10px 16px;
                }
              }
            }

            :global {
              .ant-input-affix-wrapper,
              .ant-input,
              .ant-input-password {
                height: 44px;
                font-size: 14px;
              }

              .login-btn {
                height: 44px;
                font-size: 15px;
              }
            }
          }

          .additional-info {
            .register-link {
              font-size: 13px;
            }
          }
        }
      }
    }

    .copyright {
      span {
        font-size: 11px;
      }
    }
  }
}
